<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图</title>
    <link rel="stylesheet" href="./css/jlt.css">
</head>
<body>
        <div class="jlt">
            <div class="box box1"></div>
            <div class="box box2"></div>
            <div class="box box3"></div>
        </div>
        
        <div class="laobing">
            <p>我是一个兵，爱护老百姓</p>
            <img src="./img/fig1.webp" alt="ling" class="ling">
            <img src="./img/fig3.webp" alt="ling" class="shui">
        </div>
        
        <div class="jianbian">
            <div class="box-1"></div>
            <div class="box-1"></div>
            <div class="box-1"></div>
            <div class="box-1"></div>
        </div>


        <div class="yuan">
            <div class="text-named-color">有名颜色</div>
            <div class="text-rgb">
                rgb颜色
            </div>
            <div class="text-sixteen">
                十六进制
            </div>
            <div class="text-hsl">
                hsl颜色
            </div>
            <div class="text-hsla">
                hsla颜色
            </div>
            <div class="text-opacity">
                不透明度
            </div>
            <pre>
                .yuan {
                    margin: 100px 1000px;
                    width: 200px;
                }
                .yuan div:nth-child(1n) {
                    width: 200px;
                    height: 100px;
                    border: 10px red dashed;
                    margin-bottom: 5px;
                }
                
                .text-named-color {
                    background-color: orange;
                }
                .text-rgb{
                    background-color:rgb(90, 93, 131) ;
                }
                .text-sixteen{
                    background-color: #cdf1e1;
                }
                .text-hsl{
                
                    background-color:hsl(299, 30%, 60%) ;
                }
                .text-hsla{
                     background-color:hsla(281, 39%, 20%, 0.4) ;
                }
                .text-opacity{
                    background-color: rgba(255,0,0,0.3);
                }
            </pre>
        </div>

        <div style="height: 100px;"></div>
</body>
</html>